<script setup lang="ts">
import { useInterviewQuestionsSearchFormState } from './hooks/useInterviewQuestionsSearchFormState'
import { useInterviewQuestionsListPageData } from './hooks/useInterviewQuestionsListPageData'
import { useInterviewQuestionsAdd } from './hooks/useInterviewQuestionsAdd'
import { useInterviewQuestionsEdit } from './hooks/useInterviewQuestionsEdit'
import { useInterviewQuestionsDel } from './hooks/useInterviewQuestionsDel'
import { InterviewQuestionsColumns } from './constants/InterviewQuestionsColumns'
import { useListPageTableHeight } from '@/hooks/useListPageTableHeight'
import { dataGetStrFn, dateGetStr6 } from 'rubbish-tool'
import { useClassification } from './hooks/useClassification'
import { useSecondaryClassification } from './hooks/useSecondaryClassification'
import { watch } from 'vue'
import QuestionEditor from './QuestionEditor.vue'

const entityName = '题目'
const columns = InterviewQuestionsColumns
const { formState, resetFormState } = useInterviewQuestionsSearchFormState()
const { tableBox, tableHeight } = useListPageTableHeight()
const {
  tableData,
  pagination,
  currentRowIndex,
  loading,
  onClickSearch,
  onClickSearchReset,
  onChangeTable,
} = useInterviewQuestionsListPageData(entityName, formState, resetFormState)

const {
  /* 添加逻辑 */
  addFormRef,
  addModal,
  addLoading,
  onAdd,
  onAddOk,
  onAddCancel,
} = useInterviewQuestionsAdd(entityName, onClickSearch)
const {
  /* 修改逻辑 */
  editModal,
  editLoading,
  editFormRef,
  onEdit,
  onEditOk,
  onEditCancel,
} = useInterviewQuestionsEdit(entityName, onClickSearch)
const { onDelete } = useInterviewQuestionsDel(entityName, onClickSearch, loading)

const useClassificationInstance = useClassification()
const useSecondaryClassificationInstance = useSecondaryClassification(useClassificationInstance)

watch(
  () => formState.classification,
  () => {
    useSecondaryClassificationInstance.changeSecondaryClassificationList(formState.classification)
    formState.secondaryClassification = ''
  },
)
</script>
<template>
  <TableLayout>
    <ASpin wrapperClassName="contanier" :spinning="loading">
      <div style="display: flex">
        <AFormItem style="flex: none; margin-bottom: 0" label="操作"></AFormItem>
        <AForm class="form-box" style="flex: auto" layout="inline" autocomplete="off">
          <AFormItem>
            <AButton type="primary" @click="onAdd">添加</AButton>
          </AFormItem>
        </AForm>
      </div>
      <AForm class="form-box" layout="inline" autocomplete="off">
        <AFormItem label="ID">
          <AInput v-model:value="formState.id"></AInput>
        </AFormItem>
        <AFormItem label="一级分类">
          <ASelect
            :loading="useClassificationInstance.loadingClassificationList.value"
            style="width: 180px"
            v-model:value="formState.classification"
            allow-clear
          >
            <template
              v-for="item of useClassificationInstance.classificationList.value"
              :key="item.id"
            >
              <ASelectOption :value="item.code">{{ item.value }}</ASelectOption>
            </template>
          </ASelect>
        </AFormItem>
        <AFormItem label="二级分类">
          <ASelect
            :loading="useSecondaryClassificationInstance.loadingSecondaryClassificatList.value"
            style="width: 180px"
            v-model:value="formState.secondaryClassification"
            allow-clear
          >
            <template
              v-for="item of useSecondaryClassificationInstance.secondaryClassificatList.value"
              :key="item.id"
            >
              <ASelectOption :value="item.code">{{ item.value }}</ASelectOption>
            </template></ASelect
          >
        </AFormItem>
        <AFormItem label="题目">
          <AInput v-model:value="formState.title"></AInput>
        </AFormItem>
        <AFormItem label="答案">
          <AInput v-model:value="formState.answer"></AInput>
        </AFormItem>
        <AFormItem>
          <AButton type="primary" @click="onClickSearch">查询</AButton>
        </AFormItem>
        <AFormItem>
          <AButton @click="onClickSearchReset">重置</AButton>
        </AFormItem>
      </AForm>
      <div class="table-box" ref="tableBox">
        <ATable
          :columns="columns"
          :data-source="tableData"
          :pagination="pagination"
          :scroll="{ y: tableHeight }"
          @change="onChangeTable"
        >
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.key === 'index'">
              <span>{{ currentRowIndex(index) }}</span>
            </template>
            <template v-else-if="column.key === 'createTime'">
              <span>{{ dataGetStrFn(record.createTime, dateGetStr6) }}</span>
            </template>
            <template v-else-if="column.key === 'updateTime'">
              <span>{{ dataGetStrFn(record.updateTime, dateGetStr6) }}</span>
            </template>
            <template v-else-if="column.key === 'action'">
              <div class="action-box">
                <AButton size="small" type="link" @click="onEdit(record.id)">修改</AButton>
                <ADivider type="vertical" />
                <APopconfirm title="确定删除该记录么?" @confirm="onDelete(record.id)">
                  <AButton size="small" type="link" danger>删除</AButton>
                </APopconfirm>
              </div>
            </template>
          </template>
        </ATable>
      </div>
    </ASpin>
    <AModal
      width="90%"
      v-model:open="addModal"
      :title="`添加${entityName}`"
      :confirmLoading="addLoading"
    >
      <template #footer>
        <AButton key="cancel" @click="onAddCancel">取消</AButton>
        <AButton key="ok" type="primary" :loading="addLoading" @click="onAddOk(false, true)">
          保存-重填
        </AButton>
        <AButton key="ok" type="primary" :loading="addLoading" @click="onAddOk(false, false)">
          保存-重录
        </AButton>
        <AButton key="ok" type="primary" :loading="addLoading" @click="() => onAddOk()">
          保存
        </AButton>
      </template>
      <ASpin wrapperClassName="editor-modal-spin-wrapper" :spinning="addLoading">
        <QuestionEditor
          editor-id="addEditor"
          ref="addFormRef"
          :use-classification-instance="useClassificationInstance"
        ></QuestionEditor>
      </ASpin>
    </AModal>
    <AModal
      width="90%"
      v-model:open="editModal"
      :title="`修改${entityName}`"
      :confirm-loading="editLoading"
      @ok="onEditOk"
      @cancel="onEditCancel"
    >
      <ASpin wrapperClassName="editor-modal-spin-wrapper" :spinning="editLoading">
        <QuestionEditor
          editor-id="editEditor"
          ref="editFormRef"
          :use-classification-instance="useClassificationInstance"
        ></QuestionEditor>
      </ASpin>
    </AModal>
  </TableLayout>
</template>

<style lang="less" scoped>
.contanier {
  height: 100%;
  :deep(.ant-spin-container) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .form-box {
    margin-bottom: 8px;
    flex: none;
    :deep(.ant-form-item) {
      margin-bottom: 8px;
    }
  }

  .table-box {
    flex: auto;
    overflow: hidden;
  }
}

.action-box {
  :deep(.ant-divider-vertical) {
    margin: 0 2px;
  }
}

.editor-modal-spin-wrapper {
  display: block;
  height: 100%;
  :deep(.ant-spin-container) {
    height: 100%;
    overflow: auto;
    max-height: calc(100vh - 300px);
    padding-right: 8px;
  }
}
</style>
